<template>
  <div class="com-confirm-bottom-btn">
    <flexbox class="btns-box w-bg-color w-flex-between">
      <flexbox-item v-if="btn1Title">
        <x-button
          v-if="btn1Title"
          class="btn"
          @click.native="btn1Click"
          type="warn">{{ btn1Title }}</x-button>
      </flexbox-item>
      <flexbox-item v-if="btn2Title">
        <x-button
          class="btn"
          @click.native="btn2Click"
          type="primary">{{ btn2Title }}</x-button>
      </flexbox-item>
    </flexbox>
    <div class="btn-interval"/>
  </div>
</template>

<script>
  import { XButton, Flexbox, FlexboxItem } from 'vux'
  export default {
    name: "ComConfirmBottomBtn",
    components: {
      XButton, Flexbox, FlexboxItem
    },
    props: {
      /**
       * 要处理的模型 BaseModel 的子类
       */
      model: {
        type: Object,
        default () {
          return {}
        }
      },
      /**
       * 按钮1的标题
       */
      btn1Title: {
        type: String,
        default: '删除'
      },
      /**
       * 按钮2的标题
       */
      btn2Title: {
        type: String,
        default: '确定'
      },
      /**
       * 按钮1是否要默认处理数据
       */
      dispose1: {
        type: Boolean,
        default: true
      },
      /**
       * 处理参数1
       */
      disposeParameter1: {
        type: String,
        default: ''
      }
    },
    methods: {
      /**
       * 按钮1点击
       */
      btn1Click() {
        this.$emit('click1')
        if(this.dispose1) {
          this.model.dustbin_push(this.disposeParameter1).then(() => {
            this.$router.go(-1)
          }).catch(() => {})
        }
      },
      /**
       * 按钮2点击
       */
      btn2Click() {
        this.$emit('click2', () => {
          this.model.addOrUpdate().then(() => {
            this.$router.go(-1)
          }).catch(() => {})
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .com-confirm-bottom-btn {
    .btn-interval {
      height: 80px;
    }
    .btns-box {
      left: 0;
      z-index: 1000;
      bottom: 0;
      padding: 20px 30px;
      position: fixed;
      width: 100%;
      box-sizing: border-box;
      .btn:nth-child(2) {
        margin-left: 20px;
      }
    }
  }
</style>
